import React from 'react'
import NavBarAgain from '../components/NavBarAgain'
import { RightOutline } from 'antd-mobile-icons';
import styled from "styled-components";
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import actions from '../store/action';
import _ from '../assets/utils';
import { Toast } from 'antd-mobile';

const PersonalBox = styled.div`
.baseInfo {
    box-sizing: border-box;
    margin: 40px 0;
    .pic {
        display: block;
        margin: 0 auto;
        width: 172px;
        height: 172px;
        border-radius: 50%;
    }
    .name {
        line-height: 100px;
        font-size: 36px;
        text-align: center;
        color: #000;
    }
}
.tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    height: 80px;
    line-height: 80px;
    font-size: 28px;
    color: #000;
    border-bottom: 2px solid #EEE;
}
`;

const Personal = function Personal(props) {

    let { clearUserInfo, base, clearStoreList, navigate } = props;
    console.log("----------", props)

    const loginout = () => {
        // 清除redux中的信息
        clearUserInfo();
        clearStoreList();
        // 清除Token
        _.storage.remove('tk');
        // 提示
        Toast.show({
            icon: 'success',
            content: '您已安全退出'
        });
        // 跳转
        navigate('/login?to=/personal', { replace: true });
    }

    return (
        <PersonalBox>
            <NavBarAgain title="个人中心"></NavBarAgain>
            <div className='baseInfo'>
                <Link to="/update">
                    <img src={base?.pic} alt="" className="pic" />
                    <p className="name">{base?.name}</p>
                </Link>
            </div>
            <div>
                <Link to="/store" className='tab'>
                    我的收藏
                    <RightOutline></RightOutline>
                </Link>
                <div className="tab" onClick={loginout}>
                    退出登录
                    <RightOutline></RightOutline>
                </div>
            </div>
        </PersonalBox>
    )
};

export default connect(
    state => ({ base: state.base }),
    {
        clearUserInfo: actions.base.clearUserInfo,
        clearStoreList: actions.store.clearStoreList
    })(Personal);
